<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
			
	</head>
	<body>
		<div id="app">
			<!-- <button type="button" @click="loadData()">加载数据</button> -->
			<table>
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>操作</th>
				</tr>
				<tr v-for="(student,index) in students" :key="student.id">
					<th>{{student.id}}</th>
					<th>{{student.name}}</th>
					<th>
						<a @click="findbyid(index)">编辑</a>
						<a @click="remoebyid(index)">删除</a>
					</th>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				students:[]
			},
			created() {
				this.loadData()
			},
			methods:{
				loadData(){
					console.log("发送ajax异步请求，得到数据")
					this.students = [
						{id:"1",name:"张三"},
						{id:"2",name:"张三"},
						{id:"3",name:"张三"}
					]
				},
				remoebyid(index){
					this.students.shift(index,1)
				},
				findbyid(index){
					console.log(this.students[index]) 
				}
			}
		})
	</script>
</html>
